<template>
  <Header :activeIndex="activeIndex" />
  <el-container style="margin: 0 50px">
    <el-main>
      <div class="banner">
        <el-carousel :interval="3000" :autoplay="true" class="banner">
          <el-carousel-item v-for="(item, index) in bannerImg" :key="index">
            <img :src="$apiImg+item.image" alt="轮播图" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="featured">
        <h3>热销商品</h3>
        <el-row>
          <el-col :span="8" v-for="item in products" :key="item.id">
            <el-card
              :body-style="{ padding: '50px' }"
              style="margin: 10px 20px"
            >
              <img :src="$apiImg+item.image" alt="特色商品" class="image" />
              <div style="padding: 14px">
                <span>{{ item.name }}</span>
                <div class="bottom">
                  <span class="price">￥{{ item.price }}</span>
                  <el-button
                    size="large"
                    class="button"
                    @click="ToDetail(item.id)"
                    >查看详情</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
  <Footer />
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { reactive, toRefs, ref } from 'vue'
import { detailApi,hotApi } from '@/api/featured'
import { bannerApi } from '@/api/system/sysbanner'
import { useRouter } from 'vue-router'
export default {
  components: {
    Header,
    Footer
  },
  setup() {
    const featuredProducts = reactive({
      products: {}
    })

    const Banner = reactive({
      bannerImg: []
    })

    const activeIndex = ref('1')

    const router = useRouter()

    const bannerList = () => {
      bannerApi().then((res) => {
        if (res) {
          Banner.bannerImg = res.data
        }
      })
    }

    const ToDetail = (id) => {
      router.push({
        name: 'ProductDetail',
        params: { id: id }
      })
    }
    const featured = async () => {  
  try {  
    const hot = await hotApi(); // 等待 hotApi() 返回结果  
    const promises = hot.data.map((item) => detailApi({productId:item}))// 遍历数组，并返回一个新的 Promise 数组  
    
    const results = await Promise.all(promises); // 等待所有 Promise 完成  
    if (results) {  
      featuredProducts.products = results.flatMap((res) => res.data); // 合并所有数据  
    }  
  } catch (error) {  
    console.error('Error:', error); // 处理任何可能的错误  
  }  
};
    featured()
    bannerList()
    return {
      ...toRefs(featuredProducts),
      activeIndex,
      ...toRefs(Banner),
      ToDetail
    }
  },
  methods: {}
}
</script>

<style scoped>
.banner {
  background-size: cover;
  overflow: hidden;
}
.banner img {
  width: 100%;
  max-height: 100%;
}

.featured {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.price {
  font-size: 12px;
  color: #f00;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>
